<template>
	<custom-navbar title="修改密码" bgColor="#fff" textColor="#333" />
	<view class="user-info-page">
		<!-- 表单内容区 -->
		<form class="info-form">
			<!-- 旧密码 -->
			<view class="form-item">
				<view class="label">旧密码</view>
				<input :type="old_pwd_show?'text':'password'" v-model.trim="userInfo.oldPassword" placeholder="请输入旧密码"
					maxlength="20" class="input">
				</input>
				<image class="password_img" @click="change_old_pwd" style="width: 25px; height: 15px;"
					:src="old_pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>

			</view>

			<!-- 新密码 -->
			<view class="form-item">
				<view class="label">新密码</view>
				<input :type="new_pwd_show?'text':'password'" v-model.trim="userInfo.newPassword" placeholder="请输入新密码"
					maxlength="20" class="input">
				</input>
				<image class="password_img" @click="change_new_pwd" style="width: 25px; height: 15px;"
					:src="new_pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
			
			</view>
			<!-- 确认密码 -->
			<view class="form-item">
				<view class="label">确认密码</view>
				<input :type="confirm_pwd_show?'text':'password'" v-model.trim="userInfo.confirmPassword" placeholder="请输入确认密码" maxlength="20"
					class="input">
				</input>
				<image class="password_img" @click="change_confirm_pwd" style="width: 25px; height: 15px;"
					:src="confirm_pwd_show? '/static/image/eye_open.png':'/static/image/eye_close.png'"></image>
							
			</view>
		</form>
	</view>
	<view class="toolbar-cls">
		<button size="default" type="primary" @click="updateHandler">
			保存
		</button>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		updatePwd,
	} from '@/api/userInfo.js'
	import {
		useRouter,
		toast,
		getStorageSync,
		compareDateTime
	} from '@/utils/index.js'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	import {
		use
	} from 'echarts';
	// 表单数据
	const userInfo = reactive({
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});
	const old_pwd_show = ref(false)
	const change_old_pwd = () => {
		old_pwd_show.value = !old_pwd_show.value
	}
	const new_pwd_show = ref(false)
	const change_new_pwd = () => {
		new_pwd_show.value = !new_pwd_show.value
	}
	const confirm_pwd_show = ref(false)
	const change_confirm_pwd = () => {
		confirm_pwd_show.value = !confirm_pwd_show.value
	}
	onMounted(() => {})
	// 表单验证
	const validateForm = () => {
		if (!userInfo.oldPassword) {
			toast('旧密码不能为空');
			return false;
		}

		if (!userInfo.newPassword) {
			toast('新密码不能为空');
			return false;
		} else if (!/^[^<>"'|\\]{6,20}$/.test(userInfo.newPassword)) {
			toast('不能包含非法字符,长度6-20位');
			return false;
		}

		if (!userInfo.confirmPassword) {
			toast('确认密码不能为空');
			return false;
		} else if (userInfo.newPassword != userInfo.confirmPassword) {
			toast('两次输入的密码不一致');
			return false;
		}
		return true;
	};
	const updateHandler = () => {
		if (!validateForm()) {
			return;
		}
		updatePwd(userInfo).then(res => {
			useRouter('/pages/my/my', {}, "switchTab")
		})
	}
</script>
<style scoped>
	.user-info-page {
		min-height: 100vh;
		background-color: #f4f5f7;
		padding: 64px 16px 16px 16px;
		box-sizing: border-box;

	}

	/* 表单样式 */
	.info-form {
		background-color: #fff;
		margin-top: 10px;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.label {
		width: 80px;
		font-size: 16px;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 16px;
		color: #333;
		padding: 5px 0;
		min-height: 30px;
	}

	.upload-btn {
		margin-left: 16px;
		display: flex;
		align-items: center;
		color: #007aff;
		font-size: 14px;
	}

	.upload-btn text {
		margin-left: 5px;
	}

	/* 手机号区域 */
	.input-container {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.verify-btn {
		min-width: 100px;
		height: 30px;
		line-height: 30px;
		background-color: #f5f5f5;
		color: #007aff;
		font-size: 14px;
		border-radius: 4px;
		padding: 0 10px;
		margin-left: 10px;
	}

	.verify-btn:disabled {
		color: #999;
		background-color: #eee;
	}

	/* 性别选择 */
	uni-radio-group {
		display: flex;
	}

	.gender-label {
		display: flex;
		align-items: center;
		margin-right: 24px;
		font-size: 16px;
		color: #333;

	}

	.gender-label radio {
		margin-right: 6px;
	}

	/* 成功提示弹窗 */
	.success-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200px;
		padding: 20px;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 10px;
		color: #fff;
	}

	.success-text {
		margin-top: 15px;
		font-size: 16px;
	}

	.toolbar-cls {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>